<template>
  <view class="center">
    <view class="center-list">
      <view class="center-list-item">
        <image class="list-icon" src="/static/icons/about.png"></image>
        <text class="list-text">关于我们</text>
        <text class="navigat-arrow">&#xe65e;</text>
      </view>
    </view>
    <view class="center-list">
      <view class="center-list-item">
        <image class="list-icon" src="/static/icons/icon-code.png"></image>
        <text class="list-text">版本介绍</text>
        <text class="navigat-arrow">&#xe65e;</text>
      </view>
    </view>
    <view @click="bindingUnionid" class="center-list">
      <view class="center-list-item">
        <image class="list-icon" src="/static/icons/version.png"></image>
        <text class="list-text">绑定微信开放平台</text>
      </view>
    </view>
    <view class="footer">
      <view class="p-4">
        <button @click="logout" class="bg-teal-400 text-white">退出登录</button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      login: false,
      avatarUrl: '/static/logo.png',
      uerInfo: {},
    }
  },
  onShareAppMessage() {
    console.log("分享小程序");
  },
  methods: {
    goLogin() {
      if (!this.login) {
        uni.navigateTo({
          url: '/pages/account/login',
        })
        // console.log("点击前往登录");
      }
    },
    bindingUnionid() {
      uni.showToast({
        icon: 'loading',
      })
      const self = this
      uni.login({
        provider: 'weixin',
        // scopes: 'auth_base', // auth_base（静默授权）/ auth_user（主动授权）
        async success(loginRes) {
          const authResult = loginRes.authResult
          const authCode = loginRes.code
          const errMsg = loginRes.errMsg
          console.log('# AuthResult: ', authResult)
          console.log('# AuthCode: ', authCode)
          console.log('# ErrMsg: ', errMsg)
          const { result, message, code } = await self.$request(
            '/api/wx-ma/binding-unionid',
            {
              code: authCode,
            }
          )
          console.log('# 绑定unionid: ', result)
          if (code === 1) {
            uni.showToast({
              icon: 'success',
              title: '绑定成功!',
            })
          } else {
            uni.showToast({
              icon: 'none',
              title: message,
              duration: 2500
            })
          }
          // 获取用户信息
          // uni.getUserInfo({
          //   provider: 'weixin',
          //   success: function(infoRes) {
          //     console.log('用户信息：' + infoRes.userInfo)
          //   },
          //   fail: function(err) {
          //     console.error('# 读取用户信息报错: ', err)
          //   },
          //   complete: function(res) {
          //     console.log('# 调用完成: ', res)
          //   }
          // })
        },
        fail(err) {
          reject()
          uni.showToast({
            icon: 'none',
            title: '授权失败!',
          })
          uni.hideLoading()
        },
      })
    },
    logout() {
      this.$request('/api/shiro/getLogout')
      uni.redirectTo({ url: "/pages/account/login" })
    },
  },
}
</script>

<style>
@font-face {
  font-family: texticons;
  font-weight: normal;
  font-style: normal;
  src: url('https://at.alicdn.com/t/font_984210_5cs13ndgqsn.ttf')
    format('truetype');
}

.footer {
  height: 928rpx;
  flex: 1;
  background-color: #fff;
  margin-top: 20rpx;
}

page {
  background-color: #f8f8f8;
}

.center {
  flex-direction: column;
}

.logo {
  width: 750rpx;
  height: 240rpx;
  padding: 20rpx;
  box-sizing: border-box;
  background-color: #4cd964;
  flex-direction: row;
  align-items: center;
}

.logo-hover {
  opacity: 0.8;
}

.logo-img {
  width: 150rpx;
  height: 150rpx;
  border-radius: 150rpx;
}

.logo-title {
  height: 150rpx;
  flex: 1;
  align-items: center;
  justify-content: space-between;
  flex-direction: row;
  margin-left: 20rpx;
}

.uer-name {
  height: 60rpx;
  line-height: 60rpx;
  font-size: 38rpx;
  color: #ffffff;
}

.go-login.navigat-arrow {
  font-size: 38rpx;
  color: #ffffff;
}

.login-title {
  height: 150rpx;
  align-items: self-start;
  justify-content: center;
  flex-direction: column;
  margin-left: 20rpx;
}

.center-list {
  background-color: #ffffff;
  margin-top: 20rpx;
  width: 750rpx;
  flex-direction: column;
}

.center-list-item {
  height: 120rpx;
  box-sizing: border-box;
  flex-direction: row;
  padding: 0rpx 20rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.border-bottom {
  border-bottom-width: 1rpx;
  border-color: #c8c7cc;
  border-bottom-style: solid;
}

.list-icon {
  width: 34rpx;
  height: 34rpx;
  text-align: center;
  margin-right: 20rpx;
}

.list-text {
  height: 120rpx;
  line-height: 120rpx;
  flex: 1;
  font-size: 34rpx;
  color: #555;
  flex: 1;
  text-align: left;
}

.navigat-arrow {
  height: 120rpx;
  width: 40rpx;
  line-height: 120rpx;
  font-size: 34rpx;
  color: #555;
  text-align: right;
  font-family: texticons;
}
</style>
